window.onload = function () {
    // 1.图片选项卡
    //当前选中的图片的索引
    let index = 0;
    let rightBtn = document.querySelector('.ebook_leftBox_rightBtn');
    let leftBtn = document.querySelector('.ebook_leftBox_leftBtn');
    let maxImgs = document.querySelectorAll('.img_item');
    let minImgs = document.querySelectorAll('.ebook_leftBox_minImg');
    //函数封装-提取
    // 实现功能：根据索引值 选中不同的大图和小图
    // 
    function activeImg(ss) {
        //取消所有的默认选中
        for (let i = 0; i < maxImgs.length; i++) {
            maxImgs[i].className = 'img_item';
            minImgs[i].className = 'ebook_leftBox_minImg fl';
        }
        //当前的图片 加选中效果
        maxImgs[ss].className = 'img_item show';
        minImgs[ss].className = 'ebook_leftBox_minImg fl active'
    }
    //事件监听
    // 下一张
    rightBtn.addEventListener('click', function () {
        //当前下一张 index++;
        // 边界处理
        index++;
        if (index >= maxImgs.length) {
            index = 0;
        }
        activeImg(index);
    })
    //上一张
    leftBtn.addEventListener('click', function () {
        //当前下一张 index++;
        // 边界处理
        index--;
        if (index < 0) {
            index = maxImgs.length - 1;
        }
        activeImg(index);
    })
    // 循环监听小图片的点击事件
    for (let i = 0; i < minImgs.length; i++) {
        minImgs[i].addEventListener('click', function () {
            index = i;
            activeImg(index);
        })
    }
    // 2.种类选择
    let leftkind = document.querySelector('.ebook_rightBox_leftkind');
    let rightkind = document.querySelector('.ebook_rightBox_rightkind');
    let kindImg = document.querySelector('.ebook_rightBox_rightkindimg');
    leftkind.addEventListener('click',function(){
        leftkind.className = 'ebook_rightBox_leftkind fl kind_active';
        rightkind.className = 'ebook_rightBox_rightkind fl'
        kindImg.style.left = '0px';
    })
    rightkind.addEventListener('click',function(){
        leftkind.className = 'ebook_rightBox_leftkind fl';
        rightkind.className = 'ebook_rightBox_rightkind fl kind_active'
        kindImg.style.left = '110px';
    })
    // 3.数量
    let inputNum = document.querySelector('.ebook_rightBox_num');
    let plus = document.querySelector('.ebook_rightBox_plus');
    let minus = document.querySelector('.ebook_rightBox_minus');
    let num = 1 ;
    
    plus.addEventListener('click',function(){
        num++;
        inputNum.value = num;
    });
    minus.addEventListener('click',function(){
        num--;
        inputNum.value = num;
        if(num<=0){
            num = 1;
            inputNum.value = num;
        }
    })
    // 4.选项卡
    let lis = document.querySelectorAll('.popular_mainBox_righttitle li');
    let pro = document.querySelectorAll('.popular_main li');
    for(let i=0;i<lis.length;i++){
         lis[i].addEventListener('click',function(){
    for(let j=0;j<lis.length;j++){
        lis[j].className='fl';
        pro[j].className = 'popular_products';
    }
    lis[i].className='fl popular_active';
    pro[i].className = 'popular_products popular_show';
    })
    }
//    5.滑动
let top = document.querySelectorAll('.progress_god_bartop');
let god = document.querySelectorAll('.progress_god');
for(let i=0;i<top.length;i++ ){
    god[i].addEventListener('click',function(event){
    top[i].style.width = (event.offsetX)+'px';
    })
}
    // 6.星星
    let redStar =document.querySelector('.redstar');
    let star = document.querySelector('.redstar');
    let starImgbox =document.querySelectorAll('.star_imgbox');
    for(let i=0;i<starImgbox.length;i++){
        starImgbox[i].addEventListener('click',function(event){
            redStar.style.width = (event.offsetX)+'px';
        })
    }
    


}   